<template>
  <div class="support-request-list">
    <h2>客服支持请求</h2>
    <el-card>
      <el-table :data="requestList" v-loading="loading">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="type" label="问题类型" width="120">
          <template #default="{row}">
            {{ typeMap[row.type] || row.type }}
          </template>
        </el-table-column>
        <el-table-column prop="priority" label="优先级" width="100">
          <template #default="{row}">
            <el-tag :type="priorityTagMap[row.priority]">
              {{ priorityMap[row.priority] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="问题描述" min-width="200" />
        <el-table-column prop="contact" label="联系方式" width="150" />
        <el-table-column prop="createdAt" label="提交时间" width="180">
          <template #default="{row}">
            {{ formatDate(row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column label="回复状态" width="120">
          <template #default="{row}">
            <el-tag :type="row.replyStatus === 'replied' ? 'success' : 'info'">
              {{ replyStatusMap[row.replyStatus] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{row}">
            <el-button 
              size="small" 
              @click="showDetail(row)"
              v-if="row.replyStatus === 'replied'">
              查看回复
            </el-button>
            <el-button
              type="primary"
              size="small"
              @click="showReplyDialog(row)"
              v-else>
              添加回复
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 回复对话框 -->
    <el-dialog v-model="dialogVisible" :title="`处理请求 #${currentRequest.id}`">
      <el-form :model="replyForm" label-width="80px">
        <el-form-item label="问题描述">
          <el-input 
            :value="currentRequest.description" 
            type="textarea"
            readonly
            :autosize="{ minRows: 2 }" />
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input :value="currentRequest.contact" readonly />
        </el-form-item>
        <el-form-item label="回复内容" prop="reply">
          <el-input
            v-model="replyForm.reply"
            type="textarea"
            :autosize="{ minRows: 4 }"
            placeholder="请输入详细回复内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button 
          type="primary"
          @click="submitReply"
          :loading="submitting">
          确认提交
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getSupportRequests, updateSupportRequest, ReplyStatus } from '@/api/support'
import { formatDate } from '@/utils/format'

const loading = ref(false)
const dialogVisible = ref(false)
const submitting = ref(false)
const requestList = ref([])
const currentRequest = ref({})
const replyForm = ref({ reply: '' })

// 映射表
const typeMap = {
  task: '任务问题',
  account: '账号问题',
  payment: '支付问题',
  other: '其他问题'
}

const priorityMap = {
  low: '低',
  medium: '中',
  high: '高'
}

const priorityTagMap = {
  low: 'info',
  medium: 'warning',
  high: 'danger'
}

const replyStatusMap = {
  [ReplyStatus.PENDING]: '待回复',
  [ReplyStatus.REPLIED]: '已回复'
}

// 加载数据
const loadRequests = async () => {
  try {
    loading.value = true
    const { data } = await getSupportRequests()
    requestList.value = data.map(item => ({
      ...item,
      createdAt: formatDate(item.createdAt),
      replyStatus: item.reply ? ReplyStatus.REPLIED : ReplyStatus.PENDING
    }))
  } catch (error) {
    console.error('加载失败:', error)
  } finally {
    loading.value = false
  }
}

// 显示详情
const showDetail = (row) => {
  currentRequest.value = row
  replyForm.value.reply = row.reply || ''
  dialogVisible.value = true
}

// 显示回复对话框
const showReplyDialog = (row) => {
  currentRequest.value = row
  replyForm.value = { reply: '' }
  dialogVisible.value = true
}

// 提交回复
const submitReply = async () => {
  try {
    submitting.value = true
    // 修改为直接传递回复内容字符串
    await updateSupportRequest(currentRequest.value.id, replyForm.value.reply)
    await loadRequests()
    dialogVisible.value = false
  } catch (error) {
    console.error('提交失败:', error)
  } finally {
    submitting.value = false
  }
}

onMounted(loadRequests)
</script>

<style scoped>
.support-request-list {
  padding: 20px;
}
.el-table {
  margin-top: 20px;
}
</style>